<template>
  <div class="platform-item">
    <div class="platform-view-box">
      <div class="platform-front">
        <div class="platform-item-top">
          <div class="top-text">
            <h1>{{ title }}</h1>
            <p style="color: #a3a3a3">{{ sub_title }}</p>
          </div>
          <img :src="logo" />
        </div>
        <hr class="platform-item-line" />
        <img style="width: 100%; height: 66%" :src="title_img" />
      </div>
      <div class="platform-back">
        <div class="platform-item-top">
          <div class="top-text">
            <h1 style="color: white;">{{ title }}</h1>
            <p style="color: #a3a3a3">{{ sub_title }}</p>
          </div>
          <img :src="logo" />
        </div>
        <hr class="platform-item-line" />
        <p style="font-size: 12px;color: white;line-height: 26px;">{{ profile }}</p>
      </div>
    </div>
    <div
      :class="{
        'platform-item-bottom-toleft': is_left,
        'platform-item-bottom-toright': !is_left,
      }"
    ></div>
    <p class="after-sub-text">{{ sub_title }}</p>
  </div>
</template>

<script>
export default {
  name: "PlatformItem",
  data: function () {
    return {};
  },
  props: {
    title: String,
    sub_title: String,
    title_img: String,
    logo: String,
    profile: String,
    is_left: Boolean,
  },
};
</script>

<style>
.platform-item {
  width: 40%;
  margin: 0px auto;
  height: 400px;
  display: flex;
  flex-direction: column;
  position: relative;
  perspective: 600px;
}
.platform-view-box {
  height: 100%;
  border: 1px solid #d0d0d0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
}
.platform-item:hover .platform-view-box {
  transform: rotateY(180deg);
  transition: all 0.5s linear;
}
.platform-front {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  transform: translateZ(1px);
  position: absolute;
  background-color: white;
}
.platform-back {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  position: absolute;
  transform: rotateY(180deg);
  background-color: #084c9d;
}
.platform-item-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.platform-item-line {
  width: 30%;
  margin: 10px 0px;
  height: 2px;
  background-color: #d7a882;
  align-self: flex-start;
}
.platform-item-top img {
  width: 14%;
}
.platform-item-bottom-toleft {
  height: 70px;
  background: linear-gradient(
    to bottom right,
    transparent 0%,
    transparent calc(50% - 1px),
    #a3a3a3 50%,
    transparent calc(50% + 1px),
    transparent 100%
  );
}
.platform-item-bottom-toright {
  height: 70px;
  background: linear-gradient(
    to top right,
    transparent 0%,
    transparent calc(50% - 1px),
    #a3a3a3 50%,
    transparent calc(50% + 1px),
    transparent 100%
  );
}
.after-sub-text {
  width: 330px;
  font-size: 12px;
  color: #a3a3a3;
  position: absolute;
  top: -15px;
  left: 100%;
  transform-origin: left bottom;
  transform: rotate(90deg);
}
</style>